<template>
  <div class="plan-edit-box" 
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
    v-loading="pageLoading">
    <div class="plan-page-header">
      <div class="header-title">{{ this.title }}</div>
      <div class="header-btns" >
        <RPButton optType="reset" style="margin-right: 10px" @click="hideFun" text="取消" />
        <RPButton style="margin-right: 10px" v-if="!disabledPage && ((fromPage == 'creater' && (dataStatus == 4|| dataStatus == 1 || dataStatus == 0)) ||
        (fromPage == 'Summary' && dataStatus == 3))" optType="create" type="info" @click="save('1')" text="保存" />
        <RPButton style="margin-right: 10px" v-if="!disabledPage && fromPage == 'creater' && (dataStatus == 1 || dataStatus == 0)" optType="create" type="info" @click="save('2')" text="提交" />
        <RPButton style="margin-right: 10px" v-if="!disabledPage && fromPage == 'creater' && dataStatus == 4" optType="create" type="info" @click="save('2')" text="提交修改" />
        <RPButton style="margin-right: 10px" v-if="!disabledPage && fromPage == 'creater' && dataStatus == 2" optType="create" type="info" @click="save('1')" text="撤回提交" />
        <template v-if="fromPage == 'Approver' && dataStatus == 2">
          <RPButton style="margin-right: 10px" optType="create" type="info" @click="changeStatus(true)" text="通过" />
          <RPButton style="margin-right: 10px" optType="create" type="info" @click="changeStatus(false)" text="驳回" />
        </template>
        <!-- <RPButton btnType="text" @click="exportExcel" text="Excel导入" /> -->
      </div>
    </div>
    <div class="plan-page-content">
      <Form
        :model="modelForm"
        :disabled="disabledPage || (fromPage == 'creater' && dataStatus == 2)"
        class="ivu-form-no-margin-bottom"
        ref="editForm"
        :rules="rule"
        :label-width="170"
      >

        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="tableCode"  label="业务单元：">
              <Select size="small" filterable :disabled="!!this.id" v-model="modelForm.tableCode" >
                <Option
                  @click.native="getFirstTypeList(item)"
                  v-for="item in bussinessUnit"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.value }}</Option
                >
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg" v-show="!disabledPage && !!!this.id">
          <Col span="24" style="border: none">
            <Form-item prop="code1" label="关联表：">
              <Select size="small" v-model="modelForm.code1" style="line-height:30px" 
              :remote-method="() => {}"
              @on-query-change="getListByValue"
              
              filterable @on-clear="getListByValue"  clearable>
                 <!-- <Option :title="$t('common.valid')" v-for="item in associationTable" :value="item.id" :key="item.id">{{item.id}}</Option> -->
                <Option v-for="item in associationTable" :value="item.id" :key="item.id">{{ item.taskCode }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="firstType" label="一级分类：">
              <Select size="small" :disabled="!!this.id" v-model="modelForm.firstType">
                <Option
                  @click.native="getSecondTypeList(item)"
                  v-for="item in firstClassify"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.value }}</Option
                >
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="sedType" label="二级分类：">
              <Select size="small" :disabled="!!this.id" v-model="modelForm.sedType">
                <Option
                  @click.native="getAppNameList(item)"
                  v-for="item in secondClassify"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.value }}</Option
                >
              </Select>
            </Form-item>
          </Col>
        </Row>
        
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="appname" label="应用名称：">
              <Select size="small" :disabled="!!this.id" v-model="modelForm.appname">
                <Option v-for="item in appNameList" :value="item.value" :key="item.value">{{ item.value }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="appCase" label="应用的数字化业务场景：">
              <Input v-model="modelForm.appCase" :maxlength="2000" type="textarea" :rows="4" placeholder="请输入" />
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="appTech" label="应用的数字化技术：">
              <Input
                v-model="modelForm.appTech"
                :maxlength="200"
                type="textarea"
                :rows="4"
                placeholder="请输入，人工智能/大数据/物联网/区块链/ARVR等，不同技术请以'/'隔开"
              />
            </Form-item>
          </Col>
        </Row>
        
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="trgValue" label="关键业务价值：">
              <Input v-model="modelForm.trgValue" :maxlength="300" :rows="1" placeholder="请输入" />
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="year" label="实施周期一年度：">
              <Input v-model="modelForm.year" :maxlength="32" :rows="4" placeholder="请输入" />
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="round" label="实施周期一周期：">
              <Input v-model="modelForm.round" :maxlength="32" :rows="4" placeholder="请输入" />
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24" style="border: none">
            <Form-item prop="planNotice" label="对应举措：">
              <Input v-model="modelForm.planNotice" :maxlength="500" type="textarea" :rows="4" placeholder="请输入" />
            </Form-item>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
import coverApi from '@/api/cover.js'
import todoApi from '@/api/todoCender.js'
import calCoverData from './calData'
// import  calCoverData  from '@/api/data.js'
export default {
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    disabledPage: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default() {
        return ''
      }
    },
    vsCode: {
      type: String,
      default: ''
    },
    Code:{
      type: String,
      default: ''
    },
    fromPage: {
      type: String,
      default: 'creater',
    },
    dataStatus: {
      type: Number,
      default: 0,
    },
    tableId: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      vsiDescription: '',
      //tableCode: 'SHARE_145_COUNT_TABLE_CODE',
      tableCode:'',
      resData:{},
      //关联表
      associationTable: [],
      bussinessUnit: [],
      //一级分类
      firstClassify: [],
      //二级分类
      secondClassify: [],
      //应用名称
      appNameList: [],
      selectValue: '',
      pageLoading: false,
      modelForm: {
        code1: '',
        tableCode: '',
        firstType: '',
        sedType: '',
        appname: '',
        appCase: '', //应用的数字化业务场景
        appTech: '', //应用的数字化技术
        trgValue: '', //关键业务价值
        year: '', //事实周期年度
        round: '', //实施周期周期
        planNotice: '' //应对措施
      },
      rule: {
        tableCode: [{ required: true, message: '请选择业务单元', trigger: 'blur' }],
        firstType: [{ required: true, message: '请选择一级分类', trigger: 'blur' }],
        sedType: [{ required: true, message: '请选择二级分类', trigger: 'blur' }],
        appname: [{ required: true, message: '请选择应用名称', trigger: 'blur' }],
        appCase: [{ required: true, message: '请输入应用的数字化业务场景', trigger: 'blur' }],
        appTech: [{ required: true, message: '请输入应用的数字化技术', trigger: 'blur' }],
        trgValue: [{ required: true, message: '请输入关键业务价值', trigger: 'blur' }],
        year: [{ required: true, message: '请输入实施周期一年度', trigger: 'blur' }],
        round: [{ required: true, message: '请输入实施周期一周期', trigger: 'blur' }],
        planNotice: [{ required: true, message: '请选择对应举措', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.modelForm.tableCode = this.Code
    this.getInfo()
  },
   watch: {
      'modelForm.tableCode': {
        handler(val) {
          if (val) {
            if (this.associationTable.length) {
              this.modelForm.code1 = null
              this.selectValue = null
            }
            this.getListByCode()
          }
        }
      },
      'modelForm.code1': {
        handler(val) {
          if (val) {
              coverApi.getwfRptDgCalById({
                data: {
                  id: val,
                },
                type: this.fromPage
              }).then(res => {
                let info = res.data.data
                if (this.id) {
                  info.id = this.id
                } else {
                  delete info.id
                }
                info.tableCode = this.modelForm.tableCode
                info.code1 = this.modelForm.code1
                this.modelForm = {
                      code1:  info.code1 || '',
                      tableCode: info.trgNode || '',
                      firstType: info.firstType || '',
                      sedType: info.sedType || '',
                      appname: info.appname || '',
                      appCase: info.appCase || '', //应用的数字化业务场景
                      appTech: info.appTech || '', //应用的数字化技术
                      trgValue: info.trgValue || '', //关键业务价值
                      year: info.year || '', //事实周期年度
                      round: info.round || '', //实施周期周期
                      planNotice: info.planNotice || '', //应对措施
                }
                this.firstClassify = this.bussinessUnit.find(item=> item.value === this.modelForm.tableCode) ? this.bussinessUnit.find(item=> item.value === this.modelForm.tableCode) .data : []
                this.secondClassify = this.firstClassify.find(item => item.value == this.modelForm.firstType) ? this.firstClassify.find(item => item.value == this.modelForm.firstType).data : []
                this.appNameList = this.secondClassify.find(item => item.value == this.modelForm.sedType) ? this.secondClassify.find(item => item.value == this.modelForm.sedType).data : []
              })
          }
        }
      },
    },
  methods: {
       changeStatus(types) {
        this.$Modal.confirm({
          render: (h) => {
              return h( 'div', 
                {
                  class: 'icon-box'
                },
                [
                  h('Icon', {
                    props: {
                      type: types ? 'ios-checkmark-circle' : 'ios-alert'
                    }
                  }),
                  h('span', types ? '是否确定通过？': '是否确定驳回？'),
                  h('p', types ? '通过操作不可撤销，请谨慎操作。': '驳回操作不可撤销，请谨慎操作。'),
                ]
              )
          },
          onOk: () => {
            todoApi.changeRowStatus({
              id: this.modelForm.id,
              tableId: this.tableId
            }, types).then((res) => {
              this.$Message.success({
                content: '操作成功',
                duration: 3
              })
              this.$emit('Close', true)
            })
          }
      })
    },
    getListByValue(value) {
          if (this.associationTable.find(item => item.taskCode == value)) {
            return false
          }
          this.selectValue = value
          this.getListByCode()
    },
     getListByCode() {
        let paramsData = {
          taskCode: this.selectValue,//:"编码",
          trgNode: this.modelForm.tableCode,// "业务单元",
          currentPage: 1, //-----当前页码
          pageSize: 10, //-----每页条数
          sortOrderBy: 'DESC',
          sortPropName: 'create_time'
        }
      return coverApi.getwfRptDgCalList({
        data: paramsData,
        type: this.fromPage
      }).then(res => {
            let data = res.data
            let { records } = data.data
            if (!records || !records.length || !records.find(item => item.id == this.modelForm.code1)) {
              this.modelForm.code1 = null
              this.selectValue = null
            }
            this.associationTable = records || []
          })
      },
    getFirstTypeList(item) {
      this.modelForm.firstType = ''
      this.modelForm.sedType = ''
      this.modelForm.appname = ''
      this.firstClassify = item.data
 
    },
    getSecondTypeList(item) {
      this.modelForm.sedType = ''
      this.modelForm.appname = ''
      this.secondClassify = item.data
    },
    getAppNameList(item) {
      this.modelForm.appname = ''
      this.appNameList = item.data
    },

    hideFun() {
      this.$parent.hide()
    },
    getInfo() {
      if(this.id) {
        coverApi.getwfRptDgCalById({
          data: {
            id: this.id
          },
          type: this.fromPage
        }).then(res => {
          let info = res.data.data
          
          this.modelForm = {
            ...this.modelForm,
            ...info,
            tableCode: info.trgNode
          }
          this.bussinessUnit = calCoverData.data
          this.firstClassify = this.bussinessUnit.find(item=> item.value === this.modelForm.tableCode).data
          this.secondClassify = this.firstClassify.find(item => item.value === info.firstType).data
          this.appNameList = this.secondClassify.find(item => item.value === info.sedType).data
          this.pageLoading = false
        })
      } else {
        this.modelForm.tableCode = this.Code
        this.bussinessUnit = calCoverData.data
        this.firstClassify = this.bussinessUnit.find(item=> item.value === this.Code) ? this.bussinessUnit.find(item=> item.value === this.Code).data : []
      }
    },


    updateRate(data, content){
      coverApi.updatewfRptDgCal({
        data,
        type: this.fromPage
      })
        .then(() => {
          this.$Message.success({
            content: content,
            duration: 3
          })
          this.$emit('Close', true)
        })
    },
    addRate(data,content){
       coverApi.addwfRptDgCal(data)
        .then(() => {
          this.$Message.success({
            content: content,
            duration: 3
          })
          this.$emit('Close', true)
        })
    },
    save(btnType) {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.modelForm.wfStatus = this.modelForm.wfStatus == 3 ? this.modelForm.wfStatus : btnType;
          this.modelForm.trgNode = this.modelForm.tableCode;
          delete this.modelForm.updateTime
          delete this.modelForm.updateBy
          if (this.id) {
              if(this.dataStatus == 2 && this.modelForm.wfStatus == 1){
                      this.$confirm({
                          title:"撤回提交",
                          content: "确认撤回提交?"
                          }).then(()=>{
                          this.updateRate(this.modelForm,'撤回成功')
                          })
                      } else {
                         if(this.modelForm.wfStatus == 2){
                              this.$confirm({
                                  title:"提交",
                                  content: "确认提交?"
                                  }).then(()=>{
                                  this.updateRate(this.modelForm,'提交成功')
                                  })
                              } else {
                                  this.updateRate(this.modelForm,'编辑成功')
                              }
                      }
          } else {
            if(this.modelForm.wfStatus == 2){
              this.$confirm({
                  title:"提交",
                  content: "确认提交?"
                  }).then(()=>{
                  this.addRate(this.modelForm,'提交成功')
                  })
              } else {
                  this.addRate(this.modelForm,'新增成功')
              }
          }
        } else {
          this.$Message.error({
            content: '请完善表单信息',
            duration: 3
          })
          return 0
        }
      })
    },
    exportExcel() {
      //导入
    }
  },
  created() {
    // this.getOptions()
  }
}
</script>

<style lang="less" scoped>
/deep/.ivu-btn-warning {
  padding: 4px 23px;
  background-color: #ff6f4b;
  border-color: #ff6f4b;
  border-radius: 0;
}
.plan-edit-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .plan-page-header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 20px;
    .header-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .plan-page-content {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 20%;
  }
}
/deep/.ivu-select-small .ivu-select-input, .ivu-select-small.ivu-select-multiple .ivu-select-input {
  height: 32px;
    line-height: 32px;
    top: 0px;
}
</style>
 